<template>
<div class="app">
  <div v-width="400" class="reg">
    <Form
      ref="form"
      :validOnChange="validOnChange"
      :showErrorTip="showErrorTip"
      :labelPosition="labelPosition"
      :labelWidth="110"
      :rules="validationRules"
      :model="model"
    >
    <div align:center>
        <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;秒秒测注册页面</h1><br>
      <FormItem label="用户名">
        <template v-slot:label><i class="h-icon-user"></i> 用户名</template>
        <input type="text" v-model="username">
      </FormItem>
      <FormItem label="密码" icon="h-icon-complete">
        <input type="password" v-model="password">
      </FormItem>
         <FormItem label="邮箱(用于密码找回)">
        <template v-slot:label><i class="h-icon-user"></i> 邮箱号(用于密码找回)</template>
        <input type="text" v-model="email">
      </FormItem>
      <FormItem label="验证码" icon="h-icon-user">
        <template v-slot:label><i class="h-icon-user"></i> 验证码</template>
        <input type="text" v-model="code">
        <!-- <input type="code" v-model="code"> -->
        <img :src="src" @click="changeimg">
      </FormItem>
      <FormItem>
        <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
        <Button @click="reset">重置</Button>
      </FormItem>
    </div>
    </Form>
  </div>
</div>
</template>
<style>
  .reg{
    background-color: rgb(255, 255, 255);
    width: 50%;
    height: 60%;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .app{
    background-color: #B3C0D1;
    background-image: url("../assets/img/1.jpg");
    height: 100%;
    width: 100%;
  }
</style>
<script>
import { register_post } from './axios_api/api';
export default {
  data() {
    return {
        username:"",
        password:"",
        code:"",
        email:"",
        src:'http://localhost:8000/code/',
      isLoading: false,
      labelPosition: 'left',
     
      model: {
        username: '',
        password: '',
      },
      validationRules: {
        required: ['username', 'password']
      },
      showErrorTip: true,
      validOnChange: true
    };
  },
  methods: {
      //重置
  	reset:function(){

  		this.username = '';
  		this.password = '';
        this.code = '';
        this.email = '';
  	},
      //刷新验证码
  	changeimg:function(){

  		//随机字符串
  		var num = Math.ceil(Math.random()*10);
  		//赋值地址
  		this.src = this.src + "?code=" + num;

  	},
    submit() {
        if(this.username==""){
            this.$Message("用户名不能为空")
        }else if(this.password==""){
            this.$Message("密码不能为空")
        }else if(this.email==""){
            this.$Message("请输入邮箱，后期用于密码找回")
        }
        var data = {username:this.username,password:this.password,code:this.code,email:this.email};
        console.log(data)
        register_post(data).then(resp=>{
            this.$Message(resp.message)
        })
    },
    
  }
};
</script>